<script setup>
import { showMsg } from '@/views/Util';
import axios from 'axios';
import { computed, ref } from 'vue';
let props = defineProps(['permission','type','title','list2']);
let emits = defineEmits(['submit','close'])
let obj = computed(()=>{
    return props.permission;
})
// let obj = ref({
//     title:'',
//     path:'',
//     icon:'',
//     pid:'',
//     auth:'',
//     id:''
// })
//  let arr=ref([])
//     axios.get('/api/role_list').then(res=>{
//         console.log(res)
//     if(res.data.status==200){
//      arr.value = res.data.data;
//      }
//  })
function sub(){
    axios.post('/api/add_permission',obj.value,{
        headers:{
            "Content-Type":"application/json"
        }
    }).then(res=>{
        if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000);
        }
    })
}
function edit(){
    axios.put('/api/permission_update',obj.value,{
        headers:{
            "Content-Type":"application/json"
        }
    }).then(res=>{
        if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000);
        }
    })
}
</script>

<template>
    <div class="box">
    <div class="title">
        <span class="aa">{{ title }}</span>
        <img src="../../img/错误.png" alt="" class="dd" @click="emits('submit')">
    </div>
        <input type="text" placeholder="权限名称" v-model="obj.permitName" class="bb">
        <input type="text" placeholder="描述" v-model="obj.remark" class="bb">
        <input type="text" placeholder="权限类型" v-model="obj.type" class="bb" >
        <input  v-if="type=='new'" type="button"  value="提交"      @click="sub"   class="cc">
        <input  v-if="type=='edit'" type="button" value="提交修改"  @click="edit"  class="cc">
    </div>
</template>
<style scoped>
.box{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-color: white;
  position: absolute;
  margin: 10% 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.title>.aa{
    font-size: 20px;
    color: #0aa;
    font-weight: bold;
    float: left;
}
.box>.title{
    width: 270px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.sex{
    width: 280px;
    font-weight: bold;
    font-size: 20px;
}
.title>img{
    width: 25px;
    height: 25px;
}
.box>.bb{
    background-color: #eee;
    width: 270px;
    height: 30px;
}
.box>.cc{
    background-color: #0aa;
    width: 280px;
    height: 35px;
    color: white;
}
</style>